<template>
  <div class="practice-assistant-container">
    <h1 class="page-title">实时练习评测助手</h1>
    <a-row :gutter="24">
      <!--      练习生成区 && 练习生成展示 && 错题展示 && 过往练习详情展示-->
      <a-col :span="16">
        <!--      练习生成区-->
        <a-card title="考核内容设置" class="section-card" v-if="currentView === 'setup'">
          <a-form layout="vertical">
            <!-- 知识点选择 -->
            <a-form-item label="知识点选择">
              <!--              输入知识点 -->
              <a-input
                v-model:value="practiceForm.knowledgePoint"
                placeholder="请输入考核的知识点"
              />
            </a-form-item>

            <a-form-item label="题型选择">
              <a-select
                v-model:value="practiceForm.questionType"
                placeholder="请选择题目类型"
                style="width: 100%"
              >
                <a-select-option
                  v-for="type in questionTypes"
                  :key="type.value"
                  :value="type.value"
                >
                  <a-tag :color="getQuestionTypeColor(type.value)">{{ type.label }}</a-tag> (最多{{
                    type.maxCount
                  }}题)
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="题目数量">
              <a-input-number
                v-model:value="practiceForm.questionCount"
                :min="1"
                :max="getMaxQuestionCount()"
                style="width: 100%"
              />
            </a-form-item>

            <a-form-item>
              <a-button
                type="primary"
                :loading="generating"
                @click="generatePractice"
                class="a-button-primary"
              >
                <template #icon><thunderbolt-outlined /></template>
                生成练习
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
        <!--      过渡页面-->
        <a-skeleton active :loading="generating" :paragraph="{ rows: 25 }" v-if="generating">
        </a-skeleton>

        <!--练习生成展示 && 错题展示 && 过往练习详情展示-->
        <PracticeExerciseList
          v-if="!generating && currentView === 'practice'"
          :exercises="exercises"
          :practice-title="practiceTitle"
          :question-type="practiceForm.questionType"
          :submitting="submitting"
          @back-to-setup="backToSetup"
          @go-programming="goProgramming"
          @submit-practice="handlePracticeSubmit"
        />

        <!-- 练习结果展示 -->
        <PracticeResultDisplay
          v-if="!generating && currentView === 'result'"
          :exercises="exercises"
          :correct-count="correctCount"
          :practice-duration="practiceDuration"
          @add-to-error-collection="addToErrorCollection"
          @start-new-practice="startNewPractice"
          @review-incorrect="reviewIncorrect"
          @export-result="exportResult"
        />
      </a-col>

      <a-col :span="8">
        <!-- 右侧辅助区 -->
        <a-card title="历史练习情况" class="section-card">
          <div class="stats-overview">
            <a-row :gutter="16">
              <a-col :span="8">
                <div class="stat-card">
                  <div class="stat-title">历史正确率</div>
                  <div class="stat-content">
                    <a-progress
                      type="circle"
                      :percent="practiceSituation?.accuracyRate?.toFixed(2)"
                      :width="80"
                      :stroke-color="getAccuracyColor(practiceSituation?.accuracyRate)"
                    />
                  </div>
                </div>
              </a-col>

              <a-col :span="8">
                <div class="stat-card">
                  <div class="stat-title">题目完成数目</div>
                  <div class="stat-content">
                    <div class="completion-stats">
                      <span class="completion-value">{{ practiceSituation?.totalNum }}</span>
                      <span class="achievement">{{ achievementText }}</span>
                    </div>
                  </div>
                </div>
              </a-col>

              <a-col :span="8">
                <div class="stat-card">
                  <div class="stat-title">错题集</div>
                  <div class="stat-content">
                    <a-button
                      type="primary"
                      @click="goToErrorPracticePage"
                      class="error-collection-btn"
                    >
                      <template #icon><book-outlined /></template>
                      我的错题集
                    </a-button>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-card>

        <a-card
          title="学习进度"
          class="section-card"
          v-if="currentView === 'practice' && exercises.length > 0"
        >
          <div class="progress-stats">
            <a-row :gutter="16">
              <a-col :span="24">
                <div class="stat-card">
                  <div class="stat-title">完成题目</div>
                  <div class="stat-content">
                    <div class="progress-item">
                      <div class="progress-value">{{ completedCount }}/{{ exercises.length }}</div>
                      <a-progress :percent="completedPercent" status="active" />
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-card>
        <!--排行榜-->
        <a-card class="ranking-card section-card">
          <template #title>
            <div class="card-title-with-tag">
              <span>🏆 排行榜</span>
              <a-tag color="gold" style="margin-left: 8px">本周</a-tag>
            </div>
          </template>
          <div class="ranking-list">
            <!-- 当前用户排名 -->
            <div class="my-ranking">
              <div class="ranking-item my-rank">
                <div class="rank-number my-rank-number">第{{ myRanking.rank }}+名</div>
                <div class="user-info">
                  <a-avatar :size="40" :src="myRanking.avatar">{{ myRanking.nickname }}</a-avatar>
                  <div class="user-details">
                    <div class="user-name">我的</div>
                    <div class="user-score">{{ myRanking.score }}题</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 排行榜列表 -->
            <div class="ranking-items">
              <div
                v-for="(user, index) in rankingList"
                :key="user.id"
                class="ranking-item"
                :class="{ 'top-three': index < 3 }"
              >
                <div class="rank-number" :class="getRankClass(index)">
                  <span v-if="index < 3" class="rank-icon">{{ getRankIcon(index) }}</span>
                  <span v-else>{{ index + 1 }}</span>
                </div>
                <div class="user-info">
                  <a-avatar :size="36" :src="user.avatar">{{ user.nickname }}</a-avatar>
                  <div class="user-details">
                    <div class="user-name">{{ user.nickname }}</div>
                    <div class="user-score">{{ user.score }}题</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 右侧触发器按钮 -->
    <div class="trigger-btn" @click="openHistoryDrawer">
      <span>&lt;</span>
    </div>
    <!-- 历史记录抽屉 -->
    <div v-if="historyDrawerOpen" class="drawer-overlay" @click="closeHistoryDrawer"></div>
    <div class="history-drawer" :class="{ 'drawer-open': historyDrawerOpen }">
      <div class="drawer-header">
        <h3 class="drawer-title">练习历史记录</h3>
        <button class="drawer-close" @click="closeHistoryDrawer">
          <close-outlined />
        </button>
      </div>

      <div class="drawer-content">
        <div class="drawer-pane">
          <ul class="drawer-history-list">
            <li
              v-for="(history, index) in practiceHistoryList"
              :key="history.id"
              @dblclick="getHistoryDetail(history)"
            >
              <div class="practice-cover">
              </div>
              <div class="practice-content">
                <div class="practice-title">{{ history.title || '练习记录' }}</div>
                <div class="practice-info">
                  <span class="practice-date">{{ formatDate(history.createTime) }}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="drawer-pagination">
          <a-pagination
            v-model:current="practiceHistorySearchParams.current"
            :total="practiceHistoryTotal"
            show-less-items
            size="small"
            :show-total="(total:Number) => `共有 ${total}条记录`"
            @change="handleHistoryPageChange"
          />
        </div>
      </div>
    </div>

    <ToTop />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import {
  BookOutlined,
  ThunderboltOutlined,
  CloseOutlined,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useLoginUserStore } from '@/store/user'
import {
  generateQuestion,
  getGenerateQuestion,
  listGenerateQuestionByPage
} from '@/api/generateExercisesController'
import dayjs from 'dayjs'
import { getPracticeSituationVo } from '@/api/practiceSituationController'
import { useRouter } from 'vue-router'
import { usePracticeStore } from '@/store/practice'
import ToTop from '@/components/ToTop.vue'
import PracticeExerciseList from '@/components/student/practice/PracticeExerciseList.vue'
import PracticeResultDisplay from '@/components/student/practice/PracticeResultDisplay.vue'
//格式化日期
const formatDate = (date: string) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

//题型定义的接口
interface QuestionType {
  value: string
  label: string
  maxCount: number
}
// 题型定义
const questionTypes = ref<QuestionType[]>([
  { value: '选择题', label: '选择题', maxCount: 10 },
  { value: '填空题', label: '填空题', maxCount: 10 },
  { value: '判断题', label: '判断题', maxCount: 10 },
  { value: '程序题', label: '程序题', maxCount: 3 },
  { value: '简答题', label: '简答题', maxCount: 3 },
  { value: '综合题', label: '综合题', maxCount: 3 },
])
// 生成练习要求的表单
const practiceForm = reactive({
  knowledgePoint: '',
  questionType: '选择题',
  questionCount: 5,
})

// 当前视图状态
const currentView = ref('setup') // 'setup' | 'practice' | 'result'
const generating = ref(false)
const submitting = ref(false)

// 获取当前题型的最大题目数量
const getMaxQuestionCount = () => {
  const selectedType = questionTypes.value.find((t) => t.value === practiceForm.questionType)
  return selectedType ? selectedType.maxCount : 10
}

// 练习题目数据
const exercises = ref<API.ExercisesVO[]>([])

// 当前练习索引
const currentStep = ref(0)

// 练习标题
const practiceTitle = ref('')
// 生成练习
const generatePractice = async () => {
  if (!practiceForm.knowledgePoint) {
    message.warning('请输入考核的知识点')
    return
  }
  //题型对应数量
  if (practiceForm.questionCount > getMaxQuestionCount()) {
    message.warning('超出题型数量')
    return
  }
  //生成题目流程
  generating.value = true
  currentView.value = 'practice'
  const exams = ref<API.Exam[]> ([])
  exams.value.push({
    type:practiceForm.questionType,
    count:practiceForm.questionCount
  })
  const addParams = reactive<API.AddGenerateQuestionRequest>({
    userId: loginUser.loginUser.id,
    weakPoints: practiceSituation.value?.top3errorPoints,
    accuracyRate: String(practiceSituation?.value?.accuracyRate),
    exams:exams.value,
    knowledgePoint: practiceForm.knowledgePoint,
  })
  try {
    const res = await generateQuestion({
      ...addParams
    })
    if (res.data.data && res.data.code === 0) {
      //接收题目数据
      exercises.value = res.data.data
      practiceStartTime.value = new Date()

      generating.value = false
    } else {
      message.error('题目生成失败，请稍后重试')
      generating.value = false
    }
  } catch (e) {
    message.error('题目生成失败，请稍后重试')
    generating.value = false
  }
}
// 获取题型颜色
const getQuestionTypeColor = (type: string): string => {
  switch (type) {
    case '选择题':
      return 'blue'
    case '填空题':
      return 'green'
    case '判断题':
      return 'orange'
    case '程序题':
      return 'purple'
    case '简答题':
      return 'cyan'
    case '综合题':
      return 'magenta'
    default:
      return 'default'
  }
}

const getAccuracyColor = (accuracy: any) => {
  if (accuracy >= 90) return '#52c41a'
  if (accuracy >= 70) return '#faad14'
  return '#ff4d4f'
}
//练习历史相关
//练习历史列表
const practiceHistoryList = ref<API.ExercisesSets[]>([])
const practiceHistoryTotal = ref(0)
//查询参数
//提示词查询
const loginUser = useLoginUserStore()
const practiceHistorySearchParams = reactive<API.ExercisesSetsQueryRequest>({
  current: 1,
  pageSize: 5, //固定只能展示10个数据 TODO 瀑布流的效果，往下翻才加载
  setType:1,
  sortField: 'createTime',
  sortOrder: 'descend',
})

// 历史记录抽屉相关
const historyDrawerOpen = ref(false)

// 排行榜数据
const myRanking = ref({
  rank: 999,
  nickname: '钱戈',
  avatar: '',
  score: 2,
})

const rankingList = ref([
  { id: 1, nickname: 'sule', avatar: '', score: 2695 },
  { id: 2, nickname: '朱言子妍', avatar: '', score: 2597 },
  { id: 3, nickname: 'wen', avatar: '', score: 2340 },
  { id: 4, nickname: '连何', avatar: '', score: 1600 },
  { id: 5, nickname: 'ETO', avatar: '', score: 1500 },
  { id: 6, nickname: '蔡钦', avatar: '', score: 1286 },
  { id: 7, nickname: '覃继丰', avatar: '', score: 1245 },
  { id: 8, nickname: '董光震', avatar: '', score: 1072 },
  { id: 9, nickname: '罗嘉宁', avatar: '', score: 1054 },
  { id: 10, nickname: '橘子贵', avatar: '', score: 1034 },
])

//获取练习历史列表
const fetchPracticeHistoryList = async () => {
  try {
    const res = await listGenerateQuestionByPage({
      ...practiceHistorySearchParams,
    })
    if (res.data.data && res.data.code === 0) {
      practiceHistoryList.value = res.data.data.records ?? []
      practiceHistoryTotal.value = Number(res.data.data.total) ?? 0
    } else {
      message.error('获取历史练习失败')
    }
  } catch (e) {
    message.error('获取历史练习失败')
  }
}

// 打开历史记录抽屉
const openHistoryDrawer = () => {
  historyDrawerOpen.value = true
  fetchPracticeHistoryList()
}

// 关闭历史记录抽屉
const closeHistoryDrawer = () => {
  historyDrawerOpen.value = false
}

// 处理历史记录分页
const handleHistoryPageChange = (page: number) => {
  practiceHistorySearchParams.current = page
  fetchPracticeHistoryList()
}

// 获取排行榜图标
const getRankIcon = (index: number) => {
  const icons = ['🥇', '🥈', '🥉']
  return icons[index] || index + 1
}

// 获取排行榜样式类
const getRankClass = (index: number) => {
  if (index === 0) return 'rank-first'
  if (index === 1) return 'rank-second'
  if (index === 2) return 'rank-third'
  return 'rank-normal'
}


// 成绩统计
const exerciseResults = reactive<{ id: string | number; correct: boolean }[]>([])

// 已完成题目数量
const completedCount = computed(() => exerciseResults.length)

// 完成百分比
const completedPercent = computed(() => {
  if (exercises.value.length === 0) return 0
  return Math.round((completedCount.value / exercises.value.length) * 100)
})

// 正确率
const correctRate = computed(() => {
  if (exercises.value.length === 0) return 0

  const correctCount = exercises.value.filter((result) => result.answer === result.userAns).length
  //exerciseResults.filter((result) => result.correct).length
  return Math.round((correctCount / exercises.value.length) * 100)
})

// 正确的题目数量
const correctCount = computed(() => {
  return exercises.value.filter((result) => result.answer === result.userAns).length
  // return exerciseResults.filter((result) => result.correct).length
})

// 练习总数据
const practiceSituation = ref<API.PracticeSituationVO>()
//加载数据
const loadPracticeData = async () => {
  try {
    const res = await getPracticeSituationVo()
    if (res.data.data && res.data.code === 0) {
      practiceSituation.value = res.data.data
      practiceSituation.value.rightNum = practiceSituation.value?.rightNum / 100
    } else {
      message.error('获取练习数据失败')
    }
  } catch (e) {
    message.error('获取练习数据失败')
  }
}
const achievementText = computed(() => {
  return `超越了${Math.floor(Math.random() * 60 + 20)}%的学生！`
})

// 练习开始时间
const practiceStartTime = ref(new Date())

// 练习持续时间
const practiceDuration = computed(() => {
  const endTime = new Date()
  const diffMs = endTime.getTime() - practiceStartTime.value.getTime()
  return Math.round(diffMs / 60000) // 转换为分钟
})

let errorPracticeSubmit = false
// 提交练习 TODO
const submitPractice = async () => {
  submitting.value = true
  try {
    // 保存当前答案
    saveCurrentAnswer()
    // *** 只需要统计最后的答案即可
    // 更新用户答案到每个题目中
    for (let i = 0; i < exercises.value.length; i++) {
      exercises.value[i].userAns = userAnsList.value[i] //添加的答案为选项对应的答案内容
      // exercises.value[i].userAns = getOptionDetail(userAnsList.value[i],exercises.value[i]) //添加的答案为选项对应的答案内容
    }
    const unResponse = userAnsList.value.filter((value) => {
      return value !== '未作答'
    })
    // 检查是否所有题目都已回答
    if (unResponse.length < exercises.value.length) {
      const unansweredCount = exercises.value.length - unResponse.length
      // 为了简化，这里直接切换到结果视图
      if (!confirm(`还有${unansweredCount}道题目未回答，确定提交吗？`)) {
        return
      }
    }
    //如果是错题提交则无需判题API
    if (!errorPracticeSubmit) {
      try {
        const res = await judgeQuestion({
          id: exercises.value[0]?.id,
          ansList: userAnsList.value,
        })
        if (res.data.data && res.data.code === 0) {
          message.success('提交成功，请等待批阅结果')
        } else {
          message.error('提交失败，请重试')
        }
      } catch (e) {
        message.error('提交失败，请重试')
      }
      errorPracticeSubmit = false
    }

    //答案列表置空
    userAnsList.value = []
    // 切换到结果视图
    currentView.value = 'result'
  } catch (error) {
    console.error('提交练习失败:', error)
    message.error('提交失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 开始新的练习
const startNewPractice = () => {
  currentView.value = 'setup'
  exercises.value = []
  exerciseResults.length = 0
  practiceForm.knowledgePoint = ''
  practiceForm.questionCount = 5
  practiceForm.questionType = '选择题'
  currentStep.value = 0
  userAnswer.value = ''
}

// 处理练习提交  todo
const handlePracticeSubmit = async (answers: Record<string, string>) => {
  submitting.value = true
  try {
    // 更新用户答案到每个题目中
    for (let i = 0; i < exercises.value.length; i++) {
      const exercise = exercises.value[i]
      exercise.userAns = answers[exercise.id] || ''
    }

    // 调用原有的提交逻辑
    await submitPractice()
  } catch (error) {
    console.error('提交练习失败:', error)
    message.error('提交失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 导出结果
const exportResult = () => {
  const resultData = {
    summary: {
      totalQuestions: exercises.value.length,
      correctCount: correctCount.value,
      correctRate: correctRate.value,
      duration: practiceDuration.value,
    },
    details: exercises.value.map((ex, index) => ({
      questionNumber: index + 1,
      title: ex.title,
      type: ex.type,
      userAnswer: ex.userAns || '未作答',
      correctAnswer: ex.answer,
      isCorrect: ex.userAns === ex.answer,
    })),
  }

  // 创建下载链接
  const dataStr = JSON.stringify(resultData, null, 2)
  const dataBlob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(dataBlob)
  const link = document.createElement('a')
  link.href = url
  link.download = `练习结果_${new Date().toISOString().slice(0, 10)}.json`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)

  message.success('结果导出成功')
}

// 复习错题
const reviewIncorrect = () => {
  // 筛选错题
  const incorrectExercises = exercises.value.filter((ex) => {
    const result = exerciseResults.find((r) => r.id === ex.id)
    return result && !result.correct
  })

  if (incorrectExercises.length === 0) {
    message.info('没有错题需要复习')
    return
  }

  // 重置为只包含错题的练习
  exercises.value = incorrectExercises
  exerciseResults.length = 0
  currentStep.value = 0
  practiceStartTime.value = new Date()
  currentView.value = 'practice'

  message.success(`开始复习${incorrectExercises.length}道错题`)
}
// 查看历史详情
const getHistoryDetail = async (history: any) => {
  try {
    const res = await getGenerateQuestion({
      setId: history.id
    })
    if (res.data.data && res.data.code === 0) {
      // 设置练习数据
      exercises.value = res.data.data
      // 设置用户答案和结果 todo
      exerciseResults.length = 0
      exercises.value.forEach((q, index) => {
        exerciseResults.push({
          id: String(index + 1),
          correct: q.answer === q.userAns
        })
      })

      // 更新练习标题
      practiceTitle.value = history.title + ' (历史记录)'

      // 切换到结果视图
      currentView.value = 'result'
    } else {
      message.error('获取练习详情失败')
    }
  } catch (e) {
    console.log("获取练习详情失败",e)
    message.error('获取练习详情失败')
  }
}

// 删除历史记录 TODO
const deleteHistory = (index: number) => {
  // practiceHistory.value.splice(index, 1)
  message.success('已删除历史记录')
}


// 跳转到错题集页面
const goToErrorPracticePage = () => {
  router.push('/student/error_practice')
}

// 在组件挂载时加载错题集
onMounted(() => {
  fetchPracticeHistoryList()
  loadPracticeData()
})

// 返回设置页面
const backToSetup = () => {
  currentView.value = 'setup'
  exercises.value = []
  exerciseResults.length = 0
  practiceForm.knowledgePoint = ''
  practiceForm.questionType = '选择题'
  practiceForm.questionCount = 5
  practiceTitle.value = ''
}

// 跳转到编程页面
const router = useRouter()
// TODO
const currentPracticeStore = usePracticeStore()
const goProgramming = (exercise: API.GenerateQuestionVO) => {
  // 保存当前题目的信息，以便在编程页面使用
  localStorage.setItem('currentProgramQuestion', JSON.stringify(exercise))
  currentPracticeStore.setCurrentPractice(exercise)

  // 跳转到编程页面
  router.push('/student/practice_program')
}
</script>

<style scoped>
.practice-assistant-container {
  padding: 20px;
  background: url('@/assets/BackGround/practicebg.png') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
  position: relative;
  animation: fadeIn 0.8s ease-out;
}

.practice-assistant-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.85);
  /*  background: linear-gradient(135deg, rgba(24, 144, 255, 0.1), rgba(82, 196, 26, 0.1));*/
  z-index: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.page-title {
  margin-bottom: 24px;
  color: #1890ff;
  font-size: 28px;
  font-weight: 600;
  position: relative;
  padding-left: 15px;
  transition: all 0.3s;
  animation: slideInDown 0.8s ease-out 0.2s both;
  z-index: 1;
}

.page-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 5px;
  background: linear-gradient(to bottom, #1890ff, #52c41a);
  border-radius: 3px;
  animation: slideInLeft 0.8s ease-out 0.4s both;
}

.section-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: slideInUp 0.8s ease-out 0.6s both;
  z-index: 1;
}

.section-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.98);
}

.progress-stats {
  padding: 8px 0;
}

.progress-item {
  width: 100%;
}

.progress-value {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 8px;
  text-align: center;
  transition: color 0.3s;
}

.stats-overview {
  padding: 8px 0;
}

.stat-card {
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 245, 0.8));
  backdrop-filter: blur(8px);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: float 3s ease-in-out infinite;
}

.stat-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px) scale(1.02);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.9));
}

.stat-title {
  font-size: 15px;
  color: #666;
  margin-bottom: 16px;
  font-weight: 500;
  position: relative;
  padding-bottom: 8px;
}

.stat-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, #1890ff, #52c41a);
  border-radius: 1px;
}

.stat-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.completion-stats {
  text-align: center;
}

.completion-value {
  font-size: 28px;
  font-weight: bold;
  background: linear-gradient(45deg, #1890ff, #52c41a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin-bottom: 8px;
  transition: transform 0.3s;
}

.completion-value:hover {
  transform: scale(1.1);
}

.achievement {
  font-size: 13px;
  color: #ff4d4f;
  display: block;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}

.error-collection-btn {
  padding: 0 20px;
  height: 40px;
  border-radius: 20px;
  background: linear-gradient(45deg, #722ed1, #eb2f96);
  border: none;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(114, 46, 209, 0.3);
}

.error-collection-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(114, 46, 209, 0.5);
  background: linear-gradient(45deg, #eb2f96, #722ed1);
}

.card-title-with-tag {
  display: flex;
  align-items: center;
}

.ranking-card {
  margin-top: 24px;
}

/* 排行榜样式 */
.ranking-list {
  max-height: 500px;
  overflow-y: auto;
  padding: 8px 4px;
}

.my-ranking {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.my-rank {
  background: linear-gradient(135deg, #1890ff 0%, #52c41a 100%);
  color: white;
  border: 2px solid #1890ff;
}

.my-rank-number {
  background: rgba(255, 255, 255, 0.2);
  color: white !important;
  font-weight: 600;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 248, 248, 0.8));
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ranking-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.ranking-item.top-three {
  background: linear-gradient(135deg, #fff7e6 0%, #fff2e8 100%);
  border: 1px solid #ffd591;
}

.rank-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-right: 16px;
  background: #f5f5f5;
  color: #666;
}

.rank-icon {
  font-size: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.user-details {
  margin-left: 12px;
  flex: 1;
}

.user-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.user-score {
  color: #666;
  font-size: 14px;
}

.history-item:hover .history-title {
  color: #1890ff;
}


/* 添加按钮样式 */
.a-button-primary {
  background: linear-gradient(45deg, #1890ff, #52c41a);
  border: none;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.4);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 8px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.a-button-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.a-button-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(24, 144, 255, 0.6);
  background: linear-gradient(45deg, #40a9ff, #73d13d);
}

.a-button-primary:hover::before {
  left: 100%;
}

/* 历史记录抽屉样式 */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 999;
  animation: fadeIn 0.4s ease;
}

.history-drawer {
  position: fixed;
  top: 0;
  right: -500px;
  width: 500px;
  height: 100vh;
  background: linear-gradient(135deg, #20a1da 0%, #1a8bc7 100%);
  backdrop-filter: blur(20px);
  z-index: 1000;
  transition: right 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: -10px 0 30px rgba(32, 161, 218, 0.3);
  border-radius: 20px 0 0 20px;
  overflow: hidden;
}

.history-drawer.drawer-open {
  right: 0;
}

.drawer-header {
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
}

.drawer-title {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.drawer-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  font-size: 16px;
}

.drawer-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.drawer-content {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  max-height: 900px;
  overflow-y: auto;
  padding: 12px 24px 24px 24px;
  position: relative;
  box-sizing: border-box;
}

.drawer-pane {
  margin-top: 6px;
  flex: 1;
}

.drawer-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drawer-history-list li {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  margin-bottom: 18px;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  display: flex;
  height: 130px;
}

.drawer-history-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.practice-cover {
  width: 120px;
  height: 130px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px 0 0 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.practice-type-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  font-weight: 600;
}

.practice-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

.practice-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: white;
  line-height: 1.4;
}

.practice-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.practice-type {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
}

.practice-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.practice-stats {
  font-size: 14px;
}

.accuracy-rate {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.drawer-pagination {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  margin: 0 -24px -24px -24px;
  padding-left: 24px;
  padding-right: 24px;
}

/* 右侧触发器按钮样式 */
.trigger-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 90px;
  background: linear-gradient(135deg, #20a1da 0%, #1a8bc7 100%);
  backdrop-filter: blur(15px);
  border-radius: 22px 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 998;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: -6px 0 20px rgba(32, 161, 218, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: slideInRight 0.8s ease-out 1.8s both;
}

.trigger-btn:hover {
  width: 55px;
  background: linear-gradient(135deg, #1a8bc7 0%, #20a1da 100%);
  box-shadow: -8px 0 25px rgba(32, 161, 218, 0.6);
  transform: translateY(-50%) translateX(-5px);
}

.trigger-btn span {
  color: white;
  font-size: 20px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.trigger-btn:hover span {
  transform: scale(1.2);
}
</style>
